<template>
	<view class="content">
		<view class="item item-h">
			<view class="i-i i-t">{{$t('index.zhudui')}}</view>
			<view class="i-i">{{$t('index.shijian')}}</view>
			<view class="i-i">{{$t('index.toulan')}}</view>
			<view class="i-i">{{$t('index.sanfen')}}</view>
			<view class="i-i">{{$t('index.faqiu')}}</view>
			<view class="i-i">{{$t('index.lanban')}}</view>
			<view class="i-i">{{$t('index.zhugong')}}</view>
			<view class="i-i">{{$t('index.defen')}}</view>
		</view>
		<view class="item" v-for="(item,index) in info.homePlayerList" :key="index">
			<view class="i-i i-t">
				<!-- <image class="image" :src="computImageUrl(item.playerLogo)"></image> -->
				{{item.playerChs}}
			</view>
			<view class="i-i">{{item.playtime}}</view>
			<view class="i-i">{{item.shootHit}}-{{item.shoot}}</view>
			<view class="i-i">{{item.threePointHit}}-{{item.threePointShoot}}</view>
			<view class="i-i">{{item.freeThrowHit}}-{{item.freeThrowShoot}}</view>
			<view class="i-i">{{item.offensiveRebound}}</view>
			<view class="i-i">{{item.assist}}</view>
			<view class="i-i">{{item.score}}</view>
		</view>
		
		<view class="item item-h">
			<view class="i-i i-t">{{$t('index.kedui')}}</view>
			<view class="i-i">{{$t('index.shijian')}}</view>
			<view class="i-i">{{$t('index.toulan')}}</view>
			<view class="i-i">{{$t('index.sanfen')}}</view>
			<view class="i-i">{{$t('index.faqiu')}}</view>
			<view class="i-i">{{$t('index.lanban')}}</view>
			<view class="i-i">{{$t('index.zhugong')}}</view>
			<view class="i-i">{{$t('index.defen')}}</view>
		</view>
		<view class="item" v-for="(item,index) in info.awayPlayerList" :key="index">
			<view class="i-i i-t">
				<!-- <image class="image" :src="computImageUrl(item.playerLogo)"></image> -->
				{{item.playerChs}}
			</view>
			<view class="i-i">{{item.playtime}}</view>
			<view class="i-i">{{item.shootHit}}-{{item.shoot}}</view>
			<view class="i-i">{{item.threePointHit}}-{{item.threePointShoot}}</view>
			<view class="i-i">{{item.freeThrowHit}}-{{item.freeThrowShoot}}</view>
			<view class="i-i">{{item.offensiveRebound}}</view>
			<view class="i-i">{{item.assist}}</view>
			<view class="i-i">{{item.score}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		props: {
			matchId: {
				type: [String, Number],
				default: ''
			},
		},
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
			computImageUrl(){
				return (url)=>{
					let domain = url.split("/")
					domain = domain[0]+'//'+ domain[2]
					let finalUrl = url.replace(domain, "");
					let imageurl= getApp().globalData.AppConfig.cdnDomain + finalUrl
					return imageurl
				}
			}
		},
		components: {},
		data() {
			return {
				info:'',
			}
		},
		mounted() {
			this.matchDetail()
		},
		methods: {
			matchDetail() {
				uni.$u.http.get(this.api.api_v1_bkdata_matchLineup, {
					params: {
						matchId: this.matchId
					}
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #001E28;font-size: 12px;
		.item{
			display: flex;width: 100%;align-items: center;
			.i-i{
				flex: 1;color: #fff;text-align: center;border-right: 1px solid #004055;height: 30px;align-items: center;display: flex;justify-content: center;
				border-bottom: 1px solid #004055;
			}
			.i-t{
				width: 140rpx!important;flex: initial;display: flex;align-items: center;justify-content: center;
				.image{
					width: 20px;height: 20px;
				}
			}
		}
		.item-h{
			background-color: #004055;
		}
	}
</style>